/**
* Copyright @ 2023 iAuto (Shanghai) Co., Ltd.
* All Rights Reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are NOT permitted except as agreed by
* iAuto (Shanghai) Co., Ltd.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*/


// 服务－状态记录
import React from 'react';
import { anyObj } from '@/types/components'
import { recordsProps } from '@/types/soaManage'
import {
    Button,
    Space,
    Tooltip,
} from 'antd';
import {
    TablePaginationConfig
} from 'antd/es/table';
import ExpandTable from '@/components/common/ExpandTable'
import { emptyText } from '@/pages/soaManage/abilitymanagement/utils';
import styles from './index.less';
const ifExpand = (record: anyObj) => record?.status == 2
const statusStyle = {
    //待发布
    '0': {
        style: {},
        text: '待发布'
    },
    // 已发布
    '1': {
        style: {
            color: '#00a870'
        },
        text: '已发布'
    },
    // 已退回
    "2": {
        style: {
            color: '#ff7918'
        },
        text: '已退回'
    }
}
// 增加注释解决eslint Unexpected empty arrow function
export default (props: recordsProps | any) => {
    const {
        activeKey = 1,
        dispatch,
        carMap = {},
        setActiveKey = () => {
            // 设置选中的下标
        },
        setLoading = () => {
            // 设置loading
        },
        // 搜索组件ｒｅｆ
        searchRef = {
            current: {}
        }
    } = props
    // 未发布服务分页
    const [dataSource, setDataSource] = React.useState<any[]>([])
    const [statusPagination, setStatusPagination] = React.useState<TablePaginationConfig>({
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: (page: number, pageSize: number) => {
            getStatusList(page, pageSize)
        }
    });
    // 获取状态记录ｌｉｓｔ
    const getStatusList = React.useCallback(
        (current = 1, pageSize = 10) => {
            if (dispatch) {
                setLoading(true)
                dispatch({
                    type: 'serviceModel/getStatusRecordList',
                    payload: {
                        current: current,
                        pagesize: pageSize
                    },
                }).then((resStatus: any) => {
                    setDataSource(resStatus?.data?.dataList || [])
                    setStatusPagination({
                        total: resStatus?.data?.pageCount || 0,
                        pageSize: resStatus?.data?.pagesize || pageSize || 10,
                        current: resStatus?.data?.pageNo || current || 1,
                        onChange: (page: number, pageSize: number) => getStatusList(page, pageSize),
                    })
                    setLoading(false)
                })
            }
        }, []
    )
    // 查看状态记录服务
    const checkoutRecord = React.useCallback(
        (record: anyObj) => {
            setActiveKey(record?.status == 1 ? 3 : 2)
            searchRef?.current?.selectedModel(
                record?.socVersion,
                [record?.sCode, record?.mCode],
                null, record?.status == 1 ? 3 : 2
            )
            if (record?.status == 1) {
                // 处理状态记录跳转到已发布页面逻辑
                searchRef?.current?.getEditionList([record?.sCode, record?.mCode], true, true, record?.socVersion);
            }
            if (record?.status == 0) {
                searchRef?.current?.getTableList(
                    1, 10,
                    [record?.sCode, record?.mCode],
                    record?.socVersion,
                    record?.status == 1 ? 3 : 2
                )
            }
        }, []
    )
    // table 表头
    const columns: anyObj[] = React.useMemo(
        () => [
            {
                title: '更新人员',
                width: '200px',
                key: 'importUserName',
                dataIndex: 'importUserName',
            },
            {
                title: '更新时间',
                width: '200px',
                dataIndex: 'importAt',
                key: 'importAt',
                render: (item: string) => item ? item.replace('T', ' ') : ''
            },
            {
                title: '品牌',
                dataIndex: 'brand',
                key: 'brand',
                width: '200px',
            },
            {
                title: '车系',
                dataIndex: 'sCode',
                key: 'sCode',
                render: (sCode: any) => {
                    return <span>{carMap[sCode]?.seriesName || ''}</span>;
                },
            },
            {
                title: '车型',
                dataIndex: 'mCode',
                key: 'mCode',
                render: (mCode: string, item: any) => {
                    return <span>{carMap[item?.sCode]?.models[mCode]?.modelName || ''}</span>;
                },
            },
            {
                title: '服务矩阵版本号',
                dataIndex: 'socVersion',
                key: 'socVersion',
            },
            {
                title: '最新状态',
                dataIndex: 'status',
                key: 'status',
                render: (statusItem: any) => {
                    return <span style={statusStyle[statusItem]?.style}>{statusStyle[statusItem]?.text}</span>;
                },
            },
            {
                title: '操作',
                key: 'action',
                align: 'center',
                width: '100px',
                fixed: 'right',
                render: (_: any, record: any) => (
                    <Space size="middle">
                        <Button
                            type="link"
                            //  className={classNames(styles.antBtn)}
                            onClick={
                                () => checkoutRecord(record)
                            }
                        >
                            查看
                        </Button>
                    </Space>
                ),
            },
        ], [carMap]
    )
    //table child 表头
    const childColumns: anyObj[] = React.useMemo(
        () => [
            {
                title: '',
                dataIndex: 'isNew',
                key: 'isNew',
                align: 'right',
                width: '40px',
                render: () => '',
            },
            {
                title: '操作人员',
                width: '200px',
                key: 'operator',
                dataIndex: 'operator',
            },
            {
                title: '操作时间',
                width: '200px',
                dataIndex: 'operationAt',
                key: 'operationAt',
                render: (operationAt: string) => operationAt ? operationAt?.replace('T', ' ') : ''
            },
            {
                title: '操作记录',
                dataIndex: 'operationType',
                key: 'operationType',
                width: '200px',
                render: (operationType: any) => {
                    return <span>{operationType == 1 ? '更新' : operationType == 2 ? '删除' : operationType == 3 ? '发布' : operationType == 4 ? '退回' : '导入'}</span>;
                },
            },
            {
                title: '备注',
                dataIndex: 'reason',
                key: 'reason',
                render: (text: string | null) => {
                    return (
                      <Tooltip placement="top" title={text}>
                        {' '}
                        <div
                          style={{
                            width: '400px',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                          }}
                        >
                          {text}
                        </div>
                      </Tooltip>
                    );
                  },
            },
        ], []
    )
    React.useEffect(() => {
        if (activeKey == 1) {
            getStatusList()
        }
    }, [activeKey])
    {/* table */ }
    const domExpandTable = React.useMemo(
        () =>
            <ExpandTable
                dataSource={dataSource}
                columns={columns}
                rowKey={'socId'}
                laoding={false}
                childColumns={childColumns}
                pagination={statusPagination}
                ifExpand={ifExpand}
                childDataKey={'backDetail'}
                childDataRowKey={'hisId'}>
            </ExpandTable>,
        [dataSource, columns, childColumns, statusPagination]
    )
    return (
        <div key={1} className={styles.container} style={{
            display: activeKey == 1 ? 'block' : 'none',
            marginTop: '10px',
        }}>
            {
                dataSource && dataSource.length ?
                    domExpandTable : emptyText(-1)
            }
        </div>
    )
}